<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>捷宸财务</title>
		<link rel="shortcut icon" href="./img/logo.ico" type="image/x-icon" />
		<meta name="keywords" content="捷宸财务；代理记账；公司注册；商标注册；工商变更；公司注销；公司解非，财务咨询；税务咨询；商务信息咨询；商标代理；网站建设" />
		<meta name="description" content="成都市捷宸财务管理有限公司，成立于2019年，公司主要业务范围包括公司注册，公司注销，解非，代理记账等，公司现在处于发展前期，发展的业务还不是那么齐全。但是随着发展，公司会陆续拓宽自己的业务范围，努力做优质服务，努力做优质公司。" />
	</head>
	<body>
		<a name="totop"></a>
		<div id="container">
			<!-- 头部部分 -->
			<div class="jc-head">
				<div class="head-info">
					<span class="iconfont icon-icon-test8"></span>
					<span class="fa fa-camera-retro"></span>{{ lan.head_info }}
				</div>
			</div>

			<!-- 主体部分 -->
			<div class="jc-body">
				<div style="height: 5px;width: 100%;"></div>
				<!-- 标识 logo 公司名字 -->
				<div class="jc-body-head">
					<div class="jc-body-head-img">
						<img src="./img/logo.png">
					</div>
					<div class="jc-body-head-title">
						{{ lan.companyName }}
					</div>
				</div>

				<!-- 轮播图 -->
				<div class="jc-body-swiper">
					<div id="swiper">
						<img :src="swiper.img_list[swiper.currentIndex]">
						<div class="swiper-btn">
							<div class="swiper-btn-left" @click="previousImg">
								<span id="btn1" class="btn-left">&lt;</span>
							</div>
							<div class="swiper-btn-right" @click="nextImg">
								<span id="btn2" class="btn-right">&gt;</span>
							</div>
						</div>
						<div class="swiper-point">
							<ul>
								<li v-for="(item, index) in swiper.img_list" :class="swiper.li_class[index]"></li>
							</ul>
						</div>
					</div>
				</div>

				<!-- 服务内容 -->
				<div class="jc-body-server">
					<div class="jc-body-server-title">
						{{ lan.our_server.title }}
					</div>
					<div class="jc-body-server-subtitle">
						OUR SERVERS
					</div>
					<!-- 服务图片 -->
					<div class="jc-body-server-img-cover">
						<div class="jc-body-server-img">
							<img src="./img/gszc.png">
						</div>
						<div class="jc-body-server-img">
							<img src="./img/sbzc2.png">
						</div>
						<div class="jc-body-server-img">
							<img src="./img/gszx.png">
						</div>
						<div class="jc-body-server-img">
							<img src="./img/gszx2.png">
						</div>
						<div class="jc-body-server-img">
							<img src="./img/yyzz.png">
						</div>
					</div>
					<div class="jc-body-server-img-cover margin-none">
						<div class="jc-body-server-img-info">
							{{ lan.our_server.content[0] }}
						</div>
						<div class="jc-body-server-img-info">
							{{ lan.our_server.content[1] }}
						</div>
						<div class="jc-body-server-img-info">
							{{ lan.our_server.content[2] }}
						</div>
						<div class="jc-body-server-img-info">
							{{ lan.our_server.content[3] }}
						</div>
						<div class="jc-body-server-img-info">
							{{ lan.our_server.content[4] }}
						</div>
					</div>
				</div>

				<!-- 说明信息 -->
				<div class="jc-body-companyInfo-our-title">
					<div class="jc-body-server-title">
						我们的原则
					</div>
					<div class="jc-body-server-subtitle">
						OUR PRINCIPLE
					</div>
				</div>
				<div class="jc-body-companyInfo">
					<div class="jc-body-companyInfo-item">
						<div class="jc-body-companyInfo-item-img">
							<img src="./img/pz_pzbz.png">
						</div>
						<div class="jc-body-companyInfo-item-info">
							<div class="jc-body-companyInfo-item-info-title">
								{{ lan.companyInfo[0].title}}
							</div>
							<div class="jc-body-companyInfo-item-info-subTitle">
								{{ lan.companyInfo[0].Info}}
							</div>
						</div>
					</div>
					<div class="jc-body-companyInfo-item">
						<div class="jc-body-companyInfo-item-img">
							<img src="./img/pz_jgmq.png">
						</div>
						<div class="jc-body-companyInfo-item-info">
							<div class="jc-body-companyInfo-item-info-title">
								{{ lan.companyInfo[1].title}}
							</div>
							<div class="jc-body-companyInfo-item-info-subTitle">
								{{ lan.companyInfo[1].Info}}
							</div>
						</div>
					</div>
					<div class="jc-body-companyInfo-item">
						<div class="jc-body-companyInfo-item-img">
							<img src="./img/pz_aqbz.png">
						</div>
						<div class="jc-body-companyInfo-item-info">
							<div class="jc-body-companyInfo-item-info-title">
								{{ lan.companyInfo[2].title}}
							</div>
							<div class="jc-body-companyInfo-item-info-subTitle">
								{{ lan.companyInfo[2].Info}}
							</div>
						</div>
					</div>
				</div>

				<!-- 我们的优势 -->
				<div class="jc-body-our-advantage">
					<div class="jc-body-our-advantage-title">
						我们的优势
					</div>
					<div class="jc-body-our-advantage-info">
						OUR ADVANTAGE
					</div>
				</div>
				<div class="jc-body-our-advantage-container">
					<div class="jc-body-our-advantage-container-row">
						<div class="jc-body-our-advantage-container-row-item">
							<img src="./img/pz_lt.png">
						</div>
						<div class="jc-body-our-advantage-container-row-item">
							<div class="jc-body-our-advantage-container-row-item-container">
								<div class="jc-body-our-advantage-container-row-item-container-title">
									成交业绩
								</div>
								<div class="jc-body-our-advantage-container-row-item-container-info">
									自本公司成立以来，公司成交累计3212件。
								</div>
							</div>
						</div>
					</div>
					<div class="jc-body-our-advantage-container-row">
						<div class="jc-body-our-advantage-container-row-item">
							<div class="jc-body-our-advantage-container-row-item-container">
								<div class="jc-body-our-advantage-container-row-item-container-title">
									服务质量
								</div>
								<div class="jc-body-our-advantage-container-row-item-container-info">
									我司经过电话采访调查，发现用户满意度为100%。
								</div>
							</div>
						</div>
						<div class="jc-body-our-advantage-container-row-item">
							<img src="./img/pz_rb.png">
						</div>
					</div>
				</div>

				<!-- 占位 -->
				<div class="jc-body-bottom-takeposition">

				</div>
			</div>

			<!-- 页面尾部 -->
			<div class="jc-footer">
				<!-- 相关联系信息 -->
				<div class="footer-info">
					<div class="footer-info-left">
						<div class="footer-info-left-img">
							<img style="width:139px;height:139px;" src="./img/crCode.png">
						</div>
						<div class="footer-info-left-img-info">
							{{ lan.contact_us.title }}
						</div>
					</div>
					<div class="footer-info-right">
						<p>{{ lan.contact_us.info }}</p>
						<p>{{ lan.contact_us.phone_one }}</p>
					</div>
				</div>
				<!-- 底部版权 -->
				<div class="copyright">
					<p><a name="toend">{{ lan.copyright }}</a></p>
				</div>
			</div>
		</div>
	</body>

	<script type="text/javascript" src="./js/jquery.js"></script>
	<script type="text/javascript" src="./js/vue.js"></script>

	<!-- VUE代码块 -->
	<script type="text/javascript">
		new Vue({
			el: '#container',
			data: {
				swiper: {
					img_list: [
						'img/tu.png',
						'img/gszx.png',
						'img/yyzz.png'
					],
					currentIndex: 0,
					li_class: [
						'li_hovered',
						'',
						''
					]
				},
				lan: {
					phone_two: "phone-two-china",
					companyName: '成都市捷宸财务管理有限公司',
					head_info: '欢迎您访问成都市捷宸财务管理有限公司',
					language: '中文',
					our_server: {
						title: '我们的服务',
						content: ['工商注册', '商标注册', '公司注销', '工商注销', '营业执照']
					},
					companyInfo: [{
							title: "品质保证",
							Info: "正规从业，丰富从业经验"
						},
						{
							title: "明码标价",
							Info: "价格公道，保质保量"
						},
						{
							title: "安全可靠",
							Info: "保护隐私，为您保驾护航"
						},
					],
					contact_us: {
						title: "工商咨询客服",
						info: '专业从事：公司注册、商标注册、工商变更、公司注销、公司解非，欢迎来电咨询！',
						phone_one: '联系电话：18048675198',
						phone_two: "xxx-xxx-xxx-xxx",
						qq: '客服QQ：xxxxxxxx',
						mail: '联系邮箱：xxx-xxx-xxx@qq.com'
					},
					copyright: 'Copyright © 成都市捷宸财务管理有限公司 版权所有 Allrights Reserver'
				}
			},
			created() {
				// 设置开启定时器
				this.startSwiperAction();
			},
			methods: {
				chatpanel: function() {
					alert(123)
					this.showchat = this.showchat == 'none' ? 'block' : 'none';
				},
				startSwiperAction: function() {
					setInterval(() => {
						this.nextImg();
					}, 5000).start();
				},
				previousImg: function(e) {
					var index = this.swiper.currentIndex;
					if (index > 0) {
						index = index - 1;
					} else {
						index = this.swiper.img_list.length - 1;
					}
					this.swiper.currentIndex = index;
					this.setSwiperLiClass();
				},
				nextImg: function(e) {
					var index = this.swiper.currentIndex;
					if (index < this.swiper.img_list.length - 1) {
						index = index + 1;
					} else {
						index = 0;
					}
					this.swiper.currentIndex = index;
					this.setSwiperLiClass();
				},
				setSwiperLiClass: function() {
					var list = this.swiper.li_class;
					for (let i = 0; i < list.length; i++) {
						this.swiper.li_class[i] = '';
					}
					this.swiper.li_class[this.swiper.currentIndex] = 'li_hovered';
				}
			}
		});
	</script>
	<link rel="stylesheet" href="./icon/iconfont.css">
	<!-- 本页面对应的CSS代码块 -->
	<style type="text/css">
		@import url("css/common.css");
	</style>
</html>
